<template>
  <div class="user-score">
    <!-- 账号信息 -->
    <div class="flex flex-cc pb-10 bd-bottom">
      <BaseImage
        class="kang-avatar large mr-10"
        :src="userInfo.headPic"
      ></BaseImage>

      <div>
        <div class="cl-basic">总积分：</div>

        <!-- 积分余额 -->
        <div class="flex flex-cc">
          <div
            class="fz-16 fw-bold"
            style="min-width: 80px"
            v-if="scoreVisible"
          >
            {{ balance || 0 }}
          </div>
          <div class="fz-16 fw-bold" style="min-width: 80px" v-else>******</div>

          <div class="flex flex-cc ml-5 click hover" @click="toggleVisible">
            <n-icon size="16" v-if="!scoreVisible">
              <EyeOutline></EyeOutline>
            </n-icon>
            <n-icon size="16" v-else>
              <EyeOffOutline></EyeOffOutline>
            </n-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分明细 -->
    <div class="pt-10 pb-10">
      <div class="flex flex-cc mb-15">
        <img class="mr-5" style="width: 16px" src="@/kang/img/icon_info.png" />
        <div>积分明细</div>
      </div>

      <div style="height: 265px">
        <n-skeleton text :repeat="3" v-if="loading"></n-skeleton>
        <ScrollView
          class="box"
          style="height: 265px"
          v-else-if="scoreList.length"
        >
          <div class="row" v-for="(v, i) in scoreList" :key="i">
            <div class="label hide-2">{{ v.remark }}</div>
            <div
              class="value flex-fs-0 ml-10"
              :class="v.changeType == 1 ? 'cl-1' : 'cl-2'"
            >
              {{ v.changeType == 1 ? '+' : '-' }}${{ v.amount }}
            </div>
          </div>
        </ScrollView>
        <n-empty class="mt-30" description="暂无数据" v-else></n-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import store from '@/store'
import api from '@/kang/js/api'
import mitt from '@/kang/js/mitt'
import wfc from '@/wfc/client/wfc'
import EventType from '@/wfc/client/wfcEvent'
import { EyeOutline, EyeOffOutline } from '@vicons/ionicons5'

const props = defineProps({
  // 配置
  config: {
    type: Object,
    default: {},
  },
})

const userInfo = ref({})
const balance = ref(0)
const scoreList = ref([])
const loading = ref(false)
const scoreVisible = ref(Number(localStorage.getItem('scoreVisible') || 1))

onMounted(() => {
  getUserInfo(props.config?.userId)
  getTotalScore()
  getUserScoreList(props.config?.userId)
})

onBeforeUnmount(() => {})

// 获取远程用户信息
async function getUserInfo(userId) {
  const params = {
    userId,
  }

  const { code, data } = await api.getUserInfo(params)

  if (code === 200) {
    userInfo.value = data
  }
}

// 获取用户积分余额
async function getTotalScore() {
  const { code, data } = await api.getTotalScore()

  if (code === 200) {
    balance.value = data.balance || 0
  }
}

// 获取用户积分列表
async function getUserScoreList(userId) {
  try {
    const params = {
      current: 1,
      pageSize: 10000,
      userId,
    }

    loading.value = true
    const { code, data } = await api.getUserScoreList(params)
    loading.value = false

    if (code === 200) {
      scoreList.value = data.list || []
    }
  } catch (err) {
    loading.value = false
  }
}

function toggleVisible() {
  scoreVisible.value = scoreVisible.value ? 0 : 1
  localStorage.setItem('scoreVisible', scoreVisible.value)
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;

  .cl-1 {
    color: #7555fd;
  }

  .cl-2 {
    color: #d37358;
  }
}
</style>
